<template>
  <div id="appSetting">
    <h1 class="con-right-title">
      评论设置
    </h1>
    <!-- 顶部搜索部分 -->
    <top-search :form-inline="formInline" @toSearch="toSearch"></top-search>
    <!-- 表格操作按钮 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:settings:load'"
        type="warning"
        @click="init"
      >
        初始化
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="参数ID" type="index" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="参数名称" width="180" align="center">
      </el-table-column>
      <el-table-column label="参数键值" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.appType === 'COMMENT_WORD_LIMIT'">
            <el-input
              v-model.number="scope.row.minCount"
              class="table-input"
              size="mini"
              :disabled="!scope.row.editFlag"
              onkeyup="this.value = this.value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')"
            ></el-input
            >-
            <el-input
              v-model="scope.row.maxCount"
              class="table-input"
              size="mini"
              :disabled="true"
            ></el-input
            >字
          </div>
          <div v-if="scope.row.appType === 'COMMENT_DAILY_RELEASES'">
            <el-input
              v-model.number="scope.row.dataLimit"
              class="table-input"
              size="mini"
              :disabled="!scope.row.editFlag"
              onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
            ></el-input
            >次
          </div>
          <div v-if="scope.row.appType === 'COMMENT_MINIMUM_RELEASE_TIME'">
            <el-input
              v-model.number="scope.row.interval"
              class="table-input"
              size="mini"
              :disabled="!scope.row.editFlag"
              onkeyup="this.value = this.value.replace(/[^\d]/g,'');"
            ></el-input
            >秒
          </div>
          <div v-if="scope.row.appType === 'COMMENT_CHARACTER_LIMIT'">
            <el-select
              v-model="scope.row.charLimitType"
              placeholder="不限制"
              class="setting-table-select"
              :disabled="!scope.row.editFlag"
            >
              <el-option
                v-for="item in selectOptins"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <template v-permission="'wh:system:settings:edit'">
            <el-button
              v-if="
                scope.row.editFlag === undefined || scope.row.editFlag === false
              "
              type="text"
              @click="edit(scope.row)"
            >
              编辑
            </el-button>
          </template>
          <template v-permission="'wh:system:settings:add'">
            <el-button
              v-if="scope.row.editFlag"
              type="text"
              @click="edit(scope.row)"
            >
              应用
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import topSearch from '@component/system/appSetting/topSearch'
import {
  getSearchList,
  initRequest,
  editRequest
} from '@/api/appSetting/commentSetting'
export default {
  name: 'set',
  msg: 'APP设置',
  components: {
    topSearch
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        name: ''
      },
      // 表格数据
      tableData: [],
      // 评论限制下拉框
      selectOptins: [
        { value: 'ALL', label: '不限制' },
        { value: 'PUNCTUATION', label: '纯标点' },
        { value: 'BROW', label: '纯表情' }
      ],
      editParams: {
        charLimitType: 'ALL',
        dataLimit: 2,
        interval: 5,
        maxCount: 150,
        minCount: 1
      },
      canShowPage: false,
      powerAry: [],
      powerStr: 'system:settings:list'
    }
  },
  mounted() {
    this.searchList()
    // this.getPower()
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
        this.searchList()
      })
    },
    // 初始化
    init() {
      initRequest((response) => {
        this.searchList()
      })
    },
    searchList() {
      let params = { ...this.formInline }
      getSearchList(
        params,
        (response) => {
          this.tableData = response.map((item) => {
            return Object.assign(item, { editFlag: false })
          })
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 编辑,应用
    edit(row) {
      // 判断其他参数是否正在编辑 只能同时编辑一条
      let singleEditFlag = this.tableData.some((item) => item.editFlag)
      if (singleEditFlag && !row.editFlag) {
        this.$message.error('只可编辑一条')
        return
      }
      if (row.editFlag) {
        let tableData = this.tableData
        tableData.forEach((item) => {
          if (item.charLimitType) {
            this.editParams.charLimitType = item.charLimitType
          } else if (item.dataLimit >= 0) {
            this.editParams.dataLimit = item.dataLimit
          } else if (item.interval >= 0) {
            this.editParams.interval = item.interval
          } else if (item.maxCount && item.minCount) {
            this.editParams.maxCount = item.maxCount
            this.editParams.minCount = item.minCount
          }
        })
        if (this.editParams.minCount >= this.editParams.maxCount) {
          this.$message.error('取值范围有误!')
          return
        }
        if (
          this.editParams.dataLimit > 100 ||
          this.editParams.interval === 2 ||
          this.editParams.interval === 1
        ) {
          this.$alert('参数不符合取值范围，请重新修改参数！', '系统提示', {
            confirmButtonText: '确定'
          })
          return
        }
        editRequest(
          this.editParams,
          (response) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      }
      row.editFlag = !row.editFlag
    },
    // 搜索
    toSearch() {
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#appSetting {
  .table-input {
    width: 60px;
    height: 30px;
    padding: 0px 0px !important;
  }
  .setting-table-select {
    .el-input.el-input--suffix {
      width: 90px;
    }
    .el-input__inner {
      height: 24px;
      line-height: 24px;
    }
    .el-input .el-input__inner {
      padding: 0 5px;
    }
    .el-input .el-input__suffix {
      top: 7px;
    }
  }
}
</style>
